<form (ngSubmit)="onSubmit($event);" #sendBurstForm="ngForm">

  <burst-recipient-input [recipientValue]="recipient.addressRaw"
                         (recipientChange)="onRecipientChange($event)"
                         (qrCodeUpload)="onQRUpload($event)"
                         [disabled]="immutable">

  </burst-recipient-input>

  <div class="amount-wrapper">
    <mat-form-field>
      <div class="container" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
        <input matInput [(ngModel)]="amount" name="amount" placeholder="{{ 'amount' | i18n }}" [disabled]="immutable">
        <mat-icon *ngIf="!immutable"
                  class="all-icon"
                  matTooltip="{{'spend_all' | i18n}}"
                  (click)="onSpendAll()"
        >
          all_inclusive
        </mat-icon>
      </div>
    </mat-form-field>

    <mat-form-field>
      <input matInput [(ngModel)]="fee" name="fee" placeholder="{{ 'fee' | i18n }}" [disabled]="immutable">
    </mat-form-field>
  </div>

  <burst-fee-selector *ngIf="!immutable" [fees]="fees" [(feeNQT)]="fee"></burst-fee-selector>

  <mat-checkbox labelPosition="before" [disabled]="immutable" [(ngModel)]="showMessage"
                name="showMessage">{{ "add_message_q" | i18n }}</mat-checkbox>

  <div *ngIf="showMessage">
    <mat-form-field>
      <textarea matInput [disabled]="immutable" [(ngModel)]="message" name="message"
                placeholder="{{ 'message' | i18n }}"></textarea>
    </mat-form-field>
    <mat-checkbox labelPosition="before" [disabled]="immutable" [(ngModel)]="encrypt"
                  name="encrypt">{{ "encrypt_message" | i18n }}?
    </mat-checkbox>
  </div>

  <div *ngIf="advanced">
    <mat-checkbox labelPosition="before" [disabled]="immutable" [(ngModel)]="messageIsText"
                  name="messageIsText">{{ "message_is_text" | i18n }}</mat-checkbox>

    <mat-form-field>
      <label>{{ 'deadline_hours' | i18n }}</label>
      <input matInput [(ngModel)]="deadline" name="deadline" placeholder="{{ 'deadline_hours' | i18n }}">
    </mat-form-field>

    <!--    FUTURE FEATURE-->
    <!--
        <mat-form-field >
          <input matInput [(ngModel)]="fullHash" name="fullHash"
                 placeholder="{{ 'referenced_transaction_full_hash' | i18n }}" disabled>
        </mat-form-field>

        <mat-checkbox [(ngModel)]="broadcast" name="broadcast" disabled>{{ "do_not_broadcast" | i18n }}</mat-checkbox>
        <br/>

        <mat-checkbox [(ngModel)]="note" name="note" disabled>{{ "add_note_to_self_q" | i18n }}</mat-checkbox>

        <div *ngIf="note">
          <mat-form-field >
            <textarea matInput [(ngModel)]="note_text" name="note_text" placeholder="{{ 'note' | i18n }}"></textarea>
          </mat-form-field>
        </div>
    -->
  </div>

  <div class="send-button-wrapper">
    <mat-form-field class="message-text password-field" floatLabel="never" appearance="standard">
      <input type="password" matInput required placeholder="{{'enter_pin' | i18n}}" [(ngModel)]="pin" name="pin">
    </mat-form-field>

    <button class="send-button" mat-icon-button type="submit" aria-label="Send message"
            [disabled]="!canSubmit()">
      <ng-container *ngIf="!isSending">
        <mat-icon [class.enabled]="canSubmit() || false">send</mat-icon>
      </ng-container>
      <ng-container *ngIf="isSending">
        <mat-spinner diameter="20"></mat-spinner>
      </ng-container>
    </button>
  </div>


  <strong>Total:&nbsp;</strong>
  <span [class.no-balance]="!hasSufficientBalance()">{{ getTotal() | number: '1.0-6': this.language }} BURST</span> -
  <a (click)="advanced=!advanced"><em>{{ advanced ? "basic" : "advanced" | i18n }}</em></a>

</form>
